<svg class="reftest-wait"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     onload="setTimeout(go, 0);">
<script>
  function setMatrixForElem(id, matrix) {
    var elem = document.getElementById(id);
    elem.setAttribute("transform", "matrix("+matrix+")");
  }

  function go() {
    // This moves image1 completely offscreen
    setMatrixForElem("image1", "0.5 -1 0 1 0 -30");

    // This flattens image2 to take up 0 space
    setMatrixForElem("image2", "1    0 0 0 0 0");

    // NOTE: The third image should be unaffected by the above
    // and should still render.

    document.documentElement.removeAttribute('class');
  }
</script>
<defs>
 <path id="P1" d="M 0   50 h50 v-50 h-50 z"/>
 <path id="P2" d="M 50 100 h50 v-50 h-50 z"/>
 <path id="P3" d="M 0  100 h50 v-50 h-50 z"/>
 <clipPath id="Q1"><use x="25" xlink:href="#P1"/></clipPath>
 <clipPath id="Q2"><use x="25" xlink:href="#P2"/></clipPath>
 <clipPath id="Q3"><use x="25" xlink:href="#P3"/></clipPath>
</defs>

<image xlink:href="solidblue.png" id="image1"
       width="100" height="100"
       x="25"  clip-path="url(#Q1)"/>

<image xlink:href="solidblue.png" id="image2"
       width="100" height="100"
       x="25" y="50" clip-path="url(#Q2)"/>

<image xlink:href="solidblue.png"
       width="100" height="100"
       x="25" clip-path="url(#Q3)"/>
</svg>
